<template>
  <div id="app">
    <router-view />
    <el-dialog
      :title="helpLog.title"
      :visible.sync="isShowLogDialog"
      center
      :close-on-click-modal="false"
      class="custom-dialog"
    >
      <div slot="header">
        <!-- 自定义 header 内容 -->
        <span>{{ helpLog.title }}</span>
        <!-- 或者什么都不放 -->
      </div>
      <div v-html="helpLog.content"></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="goLogDetail" v-if="helpLog.association != 0">查看操作指南</el-button>
    <el-button type="primary" @click="changeisShowLog">我已了解</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getUpToDateLog} from "@/api/helpDocument";
import {editAdminLogShow, getIsShowLog} from "@/api/user";
import {mapGetters} from "vuex";

export default {
  name: 'App',
  data(){
    return{
      isShowLogDialog:false,
      helpLog:{}
    }
  },
  computed: {
    ...mapGetters(['id'])
  },
  watch: {
    id(newVal) {
      if (newVal>0) {
        this.initlog();
      }
    }
  },
  methods:{
    initlog(){
      getUpToDateLog({type:2,system_type:0}).then((res)=>{
        if (res.data?.length != 0){
          this.helpLog = res.data
          getIsShowLog({id:this.helpLog.id}).then((res)=>{
            if (res.data.isShow === 1){
              this.isShowLogDialog = true
            }
          })
        }
      })

    },
    changeisShowLog(){
      editAdminLogShow({id:this.helpLog.id}).then((res)=>{
        this.isShowLogDialog =false
      })
    },
    goLogDetail(){
      editAdminLogShow({id:this.helpLog.id}).then((res)=>{
        this.isShowLogDialog =false
        const url = this.$router.resolve({
          name: 'DocumentList',
          query: { selectId: this.helpLog.association }
        }).href;

        window.open(url, '_blank');
      })
    },
  },
  mounted() {
    this.initlog()
  },
  created() {
    this.initlog()
  }
}
</script>
<style scoped>
::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 35px;
  color: #303133;
}
::v-deep .custom-dialog .el-dialog__header .el-dialog__headerbtn {
  display: none;
}
::v-deep .custom-dialog img {
  width: 100%;
  height: auto;
  border-style: none;
}
</style>
